<template>
  <div class="echarts-outer-wrapper width-1250">
    <Title title="北京市发票整体情况"></Title>
    <div class="content-wrapper">
      <div class="echart-tab-wrapper">
        <div class="tabs">
          <div
            class="tab-item"
            v-for="(item, index) in tabList"
            :key="item.id"
            :class="{ select: selectedIndex === index }"
            @click="changeTab(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="echart-content-wrapper">
        <Bar :EchartData="EchartData"></Bar>
      </div>
    </div>
  </div>
</template>
    
    <script>
import Title from "@/components/title";
import Bar from "./bar";

export default {
  name: "fplxqk",
  components: {
    Title,
    Bar,
  },
  data() {
    return {
      prevDate: null,
      tabList: [
        { id: 0, name: "分月" },
        { id: 1, name: "分行业" },
        { id: 2, name: "分商品品目" },
      ], //tab页数据
      selectedIndex: 0, //当前被选中的tab页索引
      resData: [], //查询回来的原始数据
      EchartData: [], // 图表数据
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.mockData();
    this.changeTab(0);
  },
  methods: {
    //模拟数据
    mockData() {
      this.resData = [
        [
          {
            name: "单位1",
            bq: 42331,
            tq: 12344,
          },
          {
            name: "单位2",
            bq: 22331,
            tq: 12344,
          },
          {
            name: "单位3",
            bq: 56331,
            tq: 12344,
          },
          {
            name: "单位4",
            bq: 24561,
            tq: 12344,
          },
          {
            name: "单位5",
            bq: 32415,
            tq: 12344,
          },
        ],
        [
          {
            name: "税种1",
            bq: 42331,
            tq: 12344,
          },
          {
            name: "税种2",
            bq: 22331,
            tq: 12344,
          },
          {
            name: "税种3",
            bq: 56331,
            tq: 12344,
          },
          {
            name: "税种4",
            bq: 24561,
            tq: 12344,
          },
          {
            name: "税种5",
            bq: 32415,
            tq: 12344,
          },
        ],
        [
          {
            name: "行业1",
            bq: 42331,
            tq: 12344,
          },
          {
            name: "行业2",
            bq: 22331,
            tq: 12344,
          },
          {
            name: "行业3",
            bq: 56331,
            tq: 12344,
          },
          {
            name: "行业4",
            bq: 24561,
            tq: 12344,
          },
          {
            name: "行业5",
            bq: 32415,
            tq: 12344,
          },
        ],
        [
          {
            name: "登记注册类型1",
            bq: 42331,
            tq: 12344,
          },
          {
            name: "登记注册类型2",
            bq: 22331,
            tq: 12344,
          },
          {
            name: "登记注册类型3",
            bq: 56331,
            tq: 12344,
          },
          {
            name: "登记注册类型4",
            bq: 24561,
            tq: 12344,
          },
          {
            name: "登记注册类型5",
            bq: 32415,
            tq: 12344,
          },
        ],
      ];
    },

    //切换tab页,同时切换数据
    changeTab(index) {
      this.EchartData = [];
      this.selectedIndex = index;
      let data = [];

      this.resData[this.selectedIndex].forEach((item, index) => {
        data.push({
          xData: item.name,
          bqData: item.bq,
          tqData: item.tq,
        });
      });

      this.$nextTick(() => {
        this.EchartData = data;
      });
    },
  },
};
</script>
    
<style lang="scss" scoped >
.echarts-outer-wrapper {
  position: relative;
  width: 936px;
  height: calc((1080px - 62px - 28px - 50px) / 2);
}
.content-wrapper {
  position: relative;
  width: 100%;
  height: calc(100% - 54px);
}
.echart-tab-wrapper {
  position: absolute;
  top: -52px;
  left: 480px;
  height: 60px;
  display: flex;
  align-items: center;
  .tabs {
    display: flex;
    height: 32px;
    line-height: 32px;
    background: linear-gradient(
      180deg,
      rgba(180, 193, 255, 0.48) 0%,
      rgba(41, 50, 93, 0) 100%
    );
    border-radius: 20px;
    overflow: hidden;
    .tab-item {
      width: 150px;
      flex: 0 0 150px;
      text-align: center;
      color: #ffffff;
      font-size: 17px;
      cursor: pointer;
    }
    .select {
      background: linear-gradient(
        180deg,
        rgba(180, 193, 255, 0.48) 0%,
        rgba(41, 50, 93, 0) 100%
      );
      border-radius: 20px;
    }
  }
}

.echart-content-wrapper {
  width: 100%;
  height: 100%;
}
</style>
    